﻿<template>
  <div class="adminTerminal">
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row>
      <el-button type="primary" size="small" icon="el-icon-plus" @click="handleGoToAddConfig">添加终端配置</el-button>
    </el-row>
    <el-row class="mt-10">
      <el-table size="small" :data="date" :header-cell-style="{background:'#f2f2f2'}">
        <el-table-column align="center" label="终端类型" prop="category"></el-table-column>
        <el-table-column align="center" label="终端名称" prop="name"></el-table-column>
        <el-table-column align="center" label="添加时间" prop="create_at"></el-table-column>
        <el-table-column align="center" label="终端描述" prop="desc"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="socpe">
            <el-button type="text" size="small" @click="handleClickTerminalList(socpe.row.id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="mt-10">
      <el-pagination class="fr" layout="total, prev, pager, next"  :total="page.total" :current-page.sync="page.current" :page-size="page.size" @current-change="handleChangeCurrent"></el-pagination>
    </el-row>
    <el-dialog :visible.sync="dialog" title="终端配置详情" width="400px">
      <p>终端类型：{{ dialog_list.category }}</p>
      <p>终端名称：{{ dialog_list.name }}</p>
      <p>添加时间：{{ dialog_list.create_at }}</p>
      <p>终端描述：{{ dialog_list.desc }}</p>
      <div slot="footer">
        <el-button type="danger" size="small" @click="handleClickDelete">删除终端配置</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { terminalAdminInit, adminTerminalList, adminTerminalDelete, terminalAdminPage } from '@/api/terminal'

export default {
  name: 'TerminalConfig',
  components: {
    Breadcrumb
  },
  data() {
    return {
      dialog: false,
      date: [],
      page: {
        size: 0,
        current: 1,
        total: 0
      },
      dialog_list: {
        id: '',
        category: '',
        create_at: '',
        desc: '',
        name: ''
      }
    }
  },
  methods: {
    handleInit() {
      terminalAdminInit().then(res => {
        if (res.data.errorCode === 0) {
          this.date = res.data.result.defines.data
          this.page.size = res.data.result.defines.per_page
          this.page.current = res.data.result.defines.current_page
          this.page.total = res.data.result.defines.total
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleChangeCurrent(v) {
      terminalAdminPage(v).then(res => {
        if (res.data.errorCode === 0) {
          this.date = res.data.result.defines.data
          this.page.size = res.data.result.defines.per_page
          this.page.current = res.data.result.defines.current_page
          this.page.total = res.data.result.defines.total
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleClickTerminalList(id) {
      adminTerminalList(id).then(res => {
        if (res.data.errorCode === 0) {
          this.dialog_list.name = res.data.result.name
          this.dialog_list.category = res.data.result.category
          this.dialog_list.create_at = res.data.result.create_at
          this.dialog_list.desc = res.data.result.desc
          this.dialog_list.id = res.data.result.id
          this.dialog = true
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleClickDelete() {
      const h = this.$createElement
      this.$msgbox({
        title: '删除终端',
        message: h('span', null, '删除终端配置后将无法正常使用终端功能，影响所有商户使用，你是否确定删除？'),
        showCancelButton: true,
        closeOnClickModal: false,
        confirmButtonText: '决议删除',
        cancelButtonText: '我在考虑一下',
        confirmButtonClass: 'el-button--danger',
        cancelButtonClass: 'el-button--info'
      }).then(() => {
        adminTerminalDelete(this.dialog_list.id).then(res => {
          if (res.data.errorCode === 0) {
            this.$message.success(res.data.errorMsg)
            terminalAdminPage(this.page.current).then(res => {
              if (res.data.errorCode === 0) {
                this.date = res.data.result.defines.data
                this.page.size = res.data.result.defines.per_page
                this.page.current = res.data.result.defines.current_page
                this.page.total = res.data.result.defines.total
              } else {
                this.$message.error(res.data.errorMsg)
              }
            })
            this.dialog = false
          } else {
            this.$message.error(res.data.errorMsg)
          }
        })
      }).catch(() => {})
    },
    handleGoToAddConfig() {
      this.$router.push({ name: 'addTerminalConfig' })
    }
  },
  created() {
    this.handleInit()
  }
}
</script>

<style lang="scss" scoped>
.adminTerminal {
  p {
    font-size: 12px;
  }
}
</style>
